*{
	margin: 0;
	padding: 0;
	list-style: none;
}
/* color */
.color-red {color: red;}
.color-gray {color: #666;}
.color-ccc {color: #ccc;}
.color-green {color: green;}

.text-center {text-align: center;}

.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-w {font-weight: bold;}
.mb-6 { margin-bottom: 6px; }
.ml-6 { margin-left: 6px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.mt-8 { margin-top: 8px;}
.mt-12 { margin-top: 12px;}
.mb-10 { margin-bottom: 10px;}
.mb-5 { margin-bottom: 5px;}
.mb-12 { margin-bottom: 12px;}
.mb-16 { margin-bottom: 16px;}

/* padding */
.pb-10 {padding-bottom: 10px;}
.pt-8 {padding-top: 8px;} 
.pt-10 {padding-top: 10px;} 
.pt-12 {padding-top: 12px;} 

.col-center { align-items: center;}
.flex{ display: flex; }
.bt-row {
  display: flex;
  justify-content: space-between;
}
.box {
	border: 1px solid #ededed;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 18px;
}
.box .top-title{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 14px;
	text-align: left;
	color: #000;
}
.icon-20{
  font-size: 20px;
}
.top-line { border-top: 1px solid #eee; }
.bottom-line { border-bottom: 1px solid #eee; }
.tag{
	font-weight: bold;
	padding: 0 12px;
	height: 22px;
	line-height: 22px;
	border-radius: 12px;
	background-color: #f3f3f3;
	color: #fff;
	font-size: 12px;
}
.tag-order {
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding: 4px 10px 4px 12px;
	border-radius: 14px;
	background-color: #f3f3f3;
	letter-spacing: 4px;
}
.tag-success{
  background-color: #21c660;
}
.tag-warning{
  background-color: #e9b507;
}

.btn {
	margin-top: 12px;
	background-color: blue;
	padding: 6px 14px;
	color: #fff;
	border: none;
	border-radius: 6px;
	width: 100%;
}
.btn-black {
	margin-top: 12px;
	background-color: #18181b;
}